<template>
  <div>
    <el-form :inline="true">
      <!-- 去除自动解保（结束定时任务？）-->
      <el-form-item>
        <confirm-select-batch
          clearable
          placeholder="解保批号"
          v-model="params['batch_no.eq']"
          @change="getData()"
        ></confirm-select-batch>
      </el-form-item>
      <el-form-item>
        <c-select
          :options="enumUnguaConfirmStatus"
          @change="getData()"
          clearable
          placeholder="回复状态"
          v-model="params['is_confirm.eq']"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <select-date-cascader
          placeholder="接收日期"
          v-model="pickDateCreate"
          @select="handleDateCreateChange"
        ></select-date-cascader>
      </el-form-item>
      <el-form-item>
        <select-date-cascader
          placeholder="回复日期"
          v-model="pickDateConfirm"
          @select="handleDateConfirmChange"
        ></select-date-cascader>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <confirm-dialog
      :visible.sync="confirmVisible"
      :batch-data="confirmBatchRow"
      :view-mode="confirmViewMode"
      @success="onConfirmSuccess"
    ></confirm-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { enumUnguaConfirmStyle, enumUnguaConfirmStatus } from '@/bank/views/limit/postloan/mixins'
import { parseCascaderDate } from '@/bank/views/limit/index'

import ConfirmSelectBatch from '@/bank/views/limit/postloan/ConfirmSelectBatch'
import ConfirmDialog from '@/bank/views/limit/postloan/ConfirmDialog'
import SelectDateCascader from '@/components/select/SelectDateCascader'

export default {
  components: {
    ConfirmSelectBatch,
    ConfirmDialog,
    SelectDateCascader,
  },
  props: {},
  data() {
    return {
      enumUnguaConfirmStatus,

      loading: false,
      params: {
        index: 1,
        size: 10,
        // 'un_gua_type.eq': 1,
      },
      order: {
        create_time: 'desc',
      },
      tableName: 'un_gua_batch',
      tableData: [],
      tableCount: 0,
      tableColumns: [
        { attrs: { label: '解保批号', prop: 'batch_no' } },
        { attrs: { label: '解保数量', prop: 'project_count', align: 'center' } },
        { attrs: { label: '解保总额(万元)', prop: 'project_funds', align: 'center' } },
        { attrs: { label: '提供机构', prop: 'submit_client_name', align: 'center' } },
        { attrs: { label: '接收日期', prop: 'createTime', align: 'center' } },
        { attrs: { label: '回复日期', prop: 'confirmTime', align: 'center' } },
        {
          attrs: { label: '回复状态', prop: 'confirmLabel', align: 'center' },
          process: (_, row) => ({ attrs: { class: `text-${row.confirmStyle}` } }),
        },
        {
          attrs: { label: '操作', align: 'center', width: '160px' },
          operations: [
            { name: '确认回复', event: this.handleConfirm },
            { name: '查看', event: this.handleView },
          ],
        },
      ],

      confirmVisible: false,
      confirmViewMode: false,
      confirmBatchRow: {},

      pickDateCreate: [],
      pickDateConfirm: [],
    }
  },
  computed: {
    ...mapGetters(['clientId', 'user']),
  },
  watch: {},
  created() {
    this.params.address_code = this.user.queryAddressCode
    this.params['bank_type.eq'] = this.user.clientOrgClassType
    this.getData()
  },
  mounted() {},
  methods: {
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = res?.data ?? {}
          const list = data.data ?? []
          this.tableData = list.map(this.dataAdapter)
          this.tableCount = data.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },

    dataAdapter(item) {
      item.createTime = this.subDate(item.create_time)
      item.confirmTime = this.subDate(item.res_time)
      item.confirmLabel = enumUnguaConfirmStatus[item.project_status] || ''
      item.confirmStyle = enumUnguaConfirmStyle[item.project_status] || ''
      return item
    },

    subDate(date = '') {
      return date.substring(0, 10)
    },

    handleConfirm(row = {}) {
      this.confirmBatchRow = row
      this.confirmViewMode = false
      this.confirmVisible = true
    },

    handleView(row = {}) {
      this.confirmBatchRow = row
      this.confirmViewMode = true
      this.confirmVisible = true
    },

    onConfirmSuccess() {
      this.getData(this.params.index)
    },

    handleDateCreateChange(val = []) {
      const [start, end] = parseCascaderDate(val)
      this.params['create_time.gte'] = start
      this.params['create_time.lte'] = end
      this.getData()
    },

    handleDateConfirmChange(val = []) {
      const [start, end] = parseCascaderDate(val)
      this.params['res_time.gte'] = start
      this.params['res_time.lte'] = end
      this.getData()
    },
  },
}
</script>

<style lang="scss" scoped></style>
